<template>
	<view style="padding: 20rpx;">
		<view class="box" style="padding: 60rpx 30rpx;">
			<view style="font-size: 40rpx;">欢迎注册</view>
			<view style="margin: 60rpx 0;">
				<uni-forms ref="formRef" :modelValue="form" :rules="rules" validateTrigger="blur">
					<uni-forms-item name="account" required>
						<uni-easyinput prefixIcon="person" v-model="form.account" placeholder="请输入账号" />
					</uni-forms-item>
					<uni-forms-item name="phone" required>
						<uni-easyinput prefixIcon="phone" v-model="form.phone" placeholder="请输入绑定手机" />
					</uni-forms-item>
					<uni-forms-item name="password" required>
						<uni-easyinput type="password" prefixIcon="locked" v-model="form.password"
							placeholder="请输入密码" />
					</uni-forms-item>
					<uni-forms-item name="password2" required>
						<uni-easyinput type="password2" prefixIcon="locked" v-model="form.password2"
							placeholder="请确认密码" />
					</uni-forms-item>
					<uni-forms-item name="code" required>
						<view style="display: flex">
							<uni-easyinput prefixIcon="info" style="flex: 1" v-model="code" placeholder="请输入图形验证码"></uni-easyinput>
							<view class="code-img-wrapper" @click="updateImageCode" style="margin-left: 20rpx; text-align: center;">
								<canvas style="width:220rpx;height:86rpx;" canvas-id="canvas"></canvas>
							</view>
						</view>
					</uni-forms-item>
					<uni-forms-item>
						<button @click="register" type="primary"
							style="width: 100%; height: 70rpx; line-height: 70rpx; background-color: #8A2BE2; border-color: #006eff;">注册</button>
					</uni-forms-item>
				</uni-forms>
			</view>

			<view style="text-align: right;">
				已有账号？请 <navigator url="/pages/login/login" style="display: inline; margin-left: 5rpx; color: #006eff;">
					登录</navigator>
			</view>

		</view>
	</view>
</template>

<script>
	import {
		Mcaptcha
	} from '@/components/mcaptcha.js'
	export default {
		data() {
			return {
				form: {
					role: 'USER'
				},
				code: '',
				rules: {
					// 对字段进行必填验证
					account: {
						rules: [
							// 校验不能为空
							{
								required: true,
								errorMessage: '请输入账号',
							}
						],
					},
					phone: {
						rules: [
							// 校验不能为空
							{
								required: true,
								errorMessage: '请输入绑定手机',
							}
						],
					},
					password: {
						rules: [
							// 校验不能为空
							{
								required: true,
								errorMessage: '请输入密码',
							}
						],
					},
					password2: {
						rules: [
							// 校验不能为空
							{
								required: true,
								errorMessage: '请输入确认密码',
							}
						],
					},
				}
			}
		},
		onReady() {
			this.mcaptcha = new Mcaptcha({
				el: 'canvas',
				width: 120,
				height: 35,
				createCodeImg: ""
			});
		},
		methods: {
			goLogin() {
				uni.redirectTo({
					url: '/pages/login/login'
				})
			},
			// 刷新验证码
			updateImageCode() {
				this.mcaptcha.refresh()
			},
			register() {
				// 登录前校验图形验证码
				if (!this.code) {
					return uni.showToast({
						icon: 'error',
						title: '请输入图形验证码'
					})
				}
				let validate = this.mcaptcha.validate(this.code)
				if (!validate) {
					return uni.showToast({
						icon: 'error',
						title: '图形验证码错误'
					})
				}
				if (this.form.password !== this.form.password2) {
					uni.showToast({
						icon: 'error',
						title: '两次密码不一致，请重新输入'
					})
				} else {
					this.$refs.formRef.validate().then(res => {
						this.$request.post('/register', this.form).then(res => {
							if (res.code === '200') {
								uni.showToast({
									icon: 'success',
									title: '注册成功'
								}),
								this.goLogin()
							} else {
								uni.showToast({
									icon: 'error',
									title: res.msg
								})
							}
						})
					}).catch(err => {
						console.log('err', err);
					})

				}
			}
		}
	}
</script>

<style>

</style>